import { ColumnProps, Message, Space, Tag } from '@kedacom/react-next'
import dayjs from 'dayjs'
import { useEffect } from 'react'
import { useState } from 'react'
import { FilterDataProps, SelectProps, TableListProps } from '../interface'
import { transTableList } from '../translator'
import { getAlarmList } from '@/api/alarm'
import { defaultFilterParams, levelList } from '../context'

const useIndexHook = () => {
	const rowKey = 'moid'
	const [data, setData] = useState<TableListProps[]>([])
	/**选择的列表id */
	const [selectedRowIds, setSelectedRowIds] = useState<Array<string>>([])
	/**是否为详情界面 */
	const [showDetail, setShowDetail] = useState<boolean>(false)
	/**点击详情的moid存储 */
	const [detailMoid, setDetailMoid] = useState<string>('')
	const [params, setParams] = useState<FilterDataProps>({ ...defaultFilterParams })
	/**搜索条件 */
	const [filterData, setFilterData] = useState<FilterDataProps>({ ...defaultFilterParams })
	const [total, setTotal] = useState<number>(0)
	const columns: ColumnProps<TableListProps>[] = [
		{
			title: '登录账号',
			dataKey: 'accountLogin',
			width: 120,
		},
		{
			title: '行为类别',
			dataKey: 'kind',
			render(rowData, value, index) {
				var _valueModule = null
				let attr = ''
				// if (value === 0) {
				// 	_valueModule = '一般'
				// 	// attr = 'no-approve'
				// } else
				if (value === 1) {
					_valueModule = '异常'
					// attr = 'reject'
				} else if (value === 2) {
					_valueModule = '违规'
					attr = 'reject'
				}
				return <span className={`${attr}`}>{_valueModule}</span>
			},
			width: 110,
		},
		{
			title: '风险级别',
			dataKey: 'level',
			render(rowData, value, index) {
				var item = levelList.find((item: SelectProps) => {
					return item.value === String(value)
				})
				return <span>{item?.label}</span>
			},
			width: 110,
		},
		{
			title: '事件描述',
			dataKey: 'description',
			width: 300,
			render(rowData, text, index) {
				text = text.replace('“usbKey” 设置为“”', '操作：usbKey解绑')
				text = text.replace('“usbKey” 设置为', '操作：usbKey绑定为')
				return <span title={text}>{text.split('，原因').shift()}</span>
			},
		},
		{
			title: '事件名称',
			dataKey: 'eventName',
			width: 120,
		},
		{
			title: '事件时间',
			dataKey: 'time',
			width: 160,
			render(row, value) {
				return <span>{dayjs(value).format('YYYY-MM-DD HH:mm:ss')}</span>
			},
		},
		{
			title: '操作',
			dataKey: '__operator',
			width: 120,
			minWidth: 100,
			render(rowData) {
				return (
					<Space space={10}>
						<Tag onClick={() => toDetail(rowData)}>详情</Tag>
					</Space>
				)
			},
		},
	]
	useEffect(() => {
		getTableList()
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [params])
	/**点击回车或搜索图标时 */
	const onFilterSearch = () => {
		reloadData()
	}
	/** 选中table某一条数据时触发 [非点击复选框时]*/
	const onRowClick = (e: any, rowData: TableListProps, moid: string, nextSelected: any, index: any) => {
		if (nextSelected) {
			setSelectedRowIds([...selectedRowIds, moid])
		} else {
			setSelectedRowIds(selectedRowIds.filter((item) => item !== moid))
		}
	}
	/**
	 * 获取表格数据
	 * @param pagerObj 默认不传 pagerObj，默认是第一页，只有点分页操作，有传进来当前页
	 */
	const getTableList = () => {
		let m = Message.loading('loading')
		let dataJson = {
			search_key: params.key,
			kind: params?.kind,
			level: params?.level,
			end_date: params?.endDate,
			start_date: params?.startDate,
			page: params?.page,
			size: params?.size,
		}
		//获取
		getAlarmList(dataJson)
			.then((res: any) => {
				let list = transTableList(res.list)
				setData(list)
				setTotal(res.total)
				m.hide()
			})
			.catch(() => {
				m.hide()
			})
	}
	/**重新加载数据，如 分页改变、点击搜索、修改数据操作，默认重置成第一页 */
	const reloadData = () => {
		//重置分页
		setParams({ ...filterData, page: 1 })
		//重新加载数据
		setSelectedRowIds([])
		// getTableList()
	}
	//分页改变时
	const onPageChange = (pageIndex: number, pageSize: number) => {
		setParams({ ...filterData, page: pageIndex, size: pageSize })
		setSelectedRowIds([])
		// getTableList()
	}
	/**跳转详情页面 */
	const toDetail = (record: TableListProps) => {
		setDetailMoid(record.moid)
		setSelectedRowIds([])
		setShowDetail(true)
	}
	/**
	 * 详情界面返回列表
	 */
	const onBackClick = () => {
		setShowDetail(false)
		setDetailMoid('')
		setSelectedRowIds([])
		getTableList()
	}
	return {
		/**点击回车或搜索图标时 */
		onFilterSearch,
		/** 选中table某一条数据时触发 */
		onRowClick,
		selectedRowIds,
		columns,
		/**唯一标识字段 */
		rowKey,
		total,
		/**表格数据 */
		data,
		onPageChange,
		showDetail,
		onBackClick,
		filterData,
		setFilterData,
		params,
		detailMoid,
	}
}
export default useIndexHook
